<!DOCTYPE html>
<html>
<head>
    <title>OpenSeadragon Basic Demo</title>
    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
    <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
    <style type="text/css">

    </style>
</head>
<body>
    <div>
        Simple demo page to show a default OpenSeadragon viewer.
    </div>
    <div id="container" style="display: none;">
        <div id="openseadragon1" style="width: 800px; height: 600px;"></div>
    </div>

    <script>
        const viewer = OpenSeadragon({
            id: "openseadragon1",
            prefixUrl: "../../build/openseadragon/images/",
            tileSources: "../data/testpattern.dzi"
        });

        // Simulate container becoming visible after a delay
        setTimeout(() => {
            document.getElementById("container").style.display = "block";
        }, 2000);
    </script>

</body>
</html>
